<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<uni-nav-bar left-icon="left" title="扫码核销" :border="false" background-color="#007AFF" color="#ffffff" :fixed="true" @clickLeft="goBack">
			<template #right>
				<view class="nav-right">
					<uni-icons type="more-filled" size="22" color="#ffffff"></uni-icons>
					<uni-icons type="location-filled" size="22" color="#ffffff" style="margin-left: 10px;"></uni-icons>
				</view>
			</template>
		</uni-nav-bar>

		<!-- 扫码区域 -->
		<view class="scan-wrapper">
			<view class="scan-frame">
				<!-- 四个角 -->
				<view class="corner corner-top-left"></view>
				<view class="corner corner-top-right"></view>
				<view class="corner corner-bottom-left"></view>
				<view class="corner corner-bottom-right"></view>
				<!-- 扫描线 -->
				<view class="scan-line"></view>
			</view>
			<view class="scan-tip">请将二维码放入框内</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanResult: ''
			}
		},
		onLoad() {
			this.startScan()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			startScan() {
				// 模拟扫码功能
				// 实际项目中应该调用 uni.scanCode()
				// uni.scanCode({
				// 	success: (res) => {
				// 		this.handleScanResult(res.result)
				// 	}
				// })
				
				// 模拟扫码延迟后跳转
				setTimeout(() => {
					// 模拟扫码成功，跳转到核销操作页面
					uni.redirectTo({
						url: '/pages/verify-operation/verify-operation?code=MC1234-5678-9012'
					})
				}, 2000)
			},
			handleScanResult(code) {
				// 处理扫码结果
				if (code) {
					uni.redirectTo({
						url: `/pages/verify-operation/verify-operation?code=${code}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #ffffff;
		padding-top: 88rpx;
	}

	.nav-right {
		display: flex;
		align-items: center;
		padding-right: 20rpx;
	}

	.scan-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 88rpx);
		padding: 40rpx;
	}

	.scan-frame {
		position: relative;
		width: 500rpx;
		height: 500rpx;
		border: 2rpx solid #007AFF;
		border-radius: 20rpx;
	}

	.corner {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #007AFF;
	}

	.corner-top-left {
		top: -4rpx;
		left: -4rpx;
		border-right: none;
		border-bottom: none;
		border-top-left-radius: 20rpx;
	}

	.corner-top-right {
		top: -4rpx;
		right: -4rpx;
		border-left: none;
		border-bottom: none;
		border-top-right-radius: 20rpx;
	}

	.corner-bottom-left {
		bottom: -4rpx;
		left: -4rpx;
		border-right: none;
		border-top: none;
		border-bottom-left-radius: 20rpx;
	}

	.corner-bottom-right {
		bottom: -4rpx;
		right: -4rpx;
		border-left: none;
		border-top: none;
		border-bottom-right-radius: 20rpx;
	}

	.scan-line {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 2rpx;
		background: linear-gradient(to right, transparent, #007AFF, transparent);
		animation: scanLine 2s linear infinite;
	}

	@keyframes scanLine {
		0% {
			top: 10%;
		}
		100% {
			top: 90%;
		}
	}

	.scan-tip {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #666;
	}
</style>
